<template>
  <div>setupson</div>
  {{msg}}<br>
  <slot>son里面的内容</slot>
  <br>
  子组件计数sonNum：{{sonNum}}
  <br>
  <button @click="addd">向父组件传递++</button>
</template>

<script>
export default {
  name: "SetupSon",
  data(){
    return {
      msg:'this is test',
      sonNum:20
    }
  },
  props:{
    'one':{
      type:String
    },
    'two':{
      type:String
    }
  },
  //说明setup()是在vue实例创建之前的
  //所以在setup()这里是无法使用this(代表的vue实例)
  //setup里面实际只能使用context.attrs
  // context.slots
  // context.emit
  setup(props,context){
    console.log('setup------');
    // console.log(this);//undefined
    //通过props来取出 前提是必须存在上一个方法，即props
    console.log(props.one + '++++++++' + props.two);
    //通过第二个参数获取
    console.log('这是context的属性方法attrs的结果' + context.attrs.three);
    //context.slots插槽
    console.log(context.slots.default());
    //这是context的属性方法context.parent的结果：
    // console.log(context);
    // context.parent.add();//此方法验证是错误的
    // context.root.zengjia();//此方法验证是错误的
    // '这是context的属性方法context.emit的结果
    context.emit('myadd',20)
  },
  beforeCreate() {
    console.log('beforeCreate###########');
  },
  created() {
    console.log('created$$$$$$$$$$$$');
    // console.log(this);
    // console.log(this.one + '----------'+ this.two);
    // this.$parent.add();
    // this.$root.zengjia();
  },
  methods:{
    sub(){
      this.sonNum--;
    },
    // addd(){
    //   this.$emit('myadd',2)
    // },
  }
}
</script>

<style scoped>

</style>